<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px" class="form-content">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="封　　面">
            <img :src="form.blogImage" class="avatar" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="博客标题">
            {{ form.blogTitle }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分　　类">
            {{ form.typeName }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="创建时间">
            {{ form.createdTime }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="更新时间">
            {{ form.updateTime }}
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="标　　签">
            <el-tag
              v-for="(item, index) in tagList"
              :key="index"
              class="blog-tag"
              >{{ item.name }}</el-tag
            >
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="简　　介">
            {{ form.blogRemark }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="文章来源">
            {{ form.blogSource }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="内　　容">
            <div v-html="form.blogContent" class="blogContent"></div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { get } from "@/api/blog";
import { getByBlogId } from "@/api/tag";
import Tinymce from "@/components/Tinymce";

export default {
  components: {
    Tinymce,
  },
  props: {
    activeId: {
      type: String,
      default: null,
    },
  },
  watch: {
    activeId: {
      immediate: true,
      handler: function () {
        this.getInfo();
        this.getTag();
      },
    },
  },
  data() {
    return {
      form: {},
      tagList: [],
    };
  },
  methods: {
    getInfo() {
      get(this.activeId).then((res) => {
        this.form = res.data;
      });
    },
    getTag() {
      getByBlogId(this.activeId).then((res) => {
        this.tagList = res.data;
      });
    },
  },
};
</script>

<style scoped>
.blog-tag {
  margin: 0px 5px;
}
.avatar {
  width: 160px;
  height: 160px;
  display: block;
}
.form-content {
  height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
}
.blogContent {
  height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
}
.blogContent >>> img {
  width: 50%;
}
</style>